
// 懒加载就是将不关键的资源延后加载
// 懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载

// 懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等
// <img src="default.png" data-src="https://xxxx/real.png">
function isVisible(el) {
    const position = el.getBoundingClientRect()
    const windowHeight = document.documentElement.clientHeight
    // 顶部边缘可见
    const topVisible = position.top > 0 && position.top < windowHeight;
    // 底部边缘可见
    const bottomVisible = position.bottom < windowHeight && position.bottom > 0;
    return topVisible || bottomVisible;
  }
  
  function imageLazyLoad() {
    const images = document.querySelectorAll('img')
    for (let img of images) {
      const realSrc = img.dataset.src
      if (!realSrc) continue
      if (isVisible(img)) {
        img.src = realSrc
        img.dataset.src = ''
      }
    }
  }
  
  // 测试
  window.addEventListener('load', imageLazyLoad)
  window.addEventListener('scroll', imageLazyLoad)
  // or
  window.addEventListener('scroll', throttle(imageLazyLoad, 1000))